<template>
  <div class="IncomingManagement_container">
    <div class="IncomingManagement_container__top">
      <el-steps
        :active="currentState"
        align-center
        finish-status="success"
        :space="250"
      >
        <el-step title="基本信息" description="Some description" />
        <el-step title="店铺资质" description="Some description" />
        <el-step title="位置及环境信息" description="Some description" />
        <el-step title="法人信息" description="Some description" />
        <el-step title="结算账号信息" description="Some description" />
      </el-steps>
    </div>
    <el-divider />
    <div class="IncomingManagement_container__bottom">
      <div class="IncomingManagement_container__bottom__toptitle">
        {{ titleList[currentState] }}
      </div>
      <router-view></router-view>
      <div class="IncomingManagement_container__bottom__bottomBtn">
        <el-button
          type="info"
          :dark="true"
          @click="toPreviousPage"
          v-if="currentState > 0 && currentState < 5"
          >上一步</el-button
        >
        <el-button
          color="#6a8bf2"
          :dark="true"
          @click="finished"
          v-if="currentState >= 4"
          >完成并提交</el-button
        >
        <el-button color="#6a8bf2" :dark="true" @click="toNextPage" v-else
          >下一步</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import router from "../../router";
import { useRoute } from "vue-router";

// do not use same name with ref
const route = useRoute();
const routeIndx = route.path.split("/");
const currentState = ref(parseInt(routeIndx[routeIndx.length - 1]) || 0);
const toNextPage = () => {
  if (currentState.value < 5) {
    currentState.value += 1;
    router.push(`/shop-op2/${currentState.value}`);
  } else {
    currentState.value = 0;
  }
};
const toPreviousPage = () => {
  if (currentState.value > 0) {
    currentState.value -= 1;
  }
  if (currentState.value > 4) {
    console.log(77777);
    currentState.value = 0;
  }
  router.push(`/shop-op2/${currentState.value}`);
};
const finished = () => {
  currentState.value = 5;
  router.push(`/shop-op2/${currentState.value}`);
  ElMessage({
    type: "success",
    message: "提交成功",
  });
};
const titleList = reactive([
  "基本信息",
  "店铺资质",
  "位置及环境信息",
  "法人信息",
  "结算账号信息",
]);
</script>
<style lang="scss" scoped>
.IncomingManagement_container {
  width: 95%;
  height: 700px;
  background-color: #fff;
  margin-top: 20px;
  padding: 20px 10px;
  box-sizing: border-box;
  &__bottom {
    &__toptitle {
      margin-left: 20px;
    }
    &__bottomBtn {
      display: flex;
      justify-content: center;
      & button {
        width: 100px;
        color: #fff;
      }
    }
  }
}
</style>
